<script>
import { useUserStore } from "./store/userStore";
export default {
  computed: {
    userInfo() {
      const userStore = useUserStore();
      return userStore.userInfo
    },
    activateIndex() {
      const { name } = this.$route
      switch (name) {
        case 'home':
          return '/';
        case 'aisearchIndex':
          return '/aisearchIndex';
        case 'kdbList':
          return '/kdbList';
        case 'kdbInfo':
          return '/kdbList';
        case "roleAgentList":
          return '/roleAgentList';
        case "roleAgentInfo":
          return '/roleAgentList'
        case "soundInfo":
          return '/soundList'
        case "soundList":
          return '/soundList'

      }
    }
  },
  methods: {
    logout() {
      const userStore = useUserStore();
      userStore.logout()

      if (!userStore.userInfo) {
        this.$router.push('/login')
      }
    }
  }
}
</script>

<template>
  <el-header style="padding:10px;width: 100%;font-weight: 600;height: 70px; background-color: #fff;">
    <div style="width: 100%;display: flex;justify-content: space-between;align-items: center;">
      <div style="width: 100%;">
        <div style="width: 100%;display: flex;align-items: center;">
          <img src="./assets/logoIcon.png" style="height: 50px" class="hidden-xs-only" />
          <el-menu :default-active="activateIndex" class="el-menu-demo" mode="horizontal"
            style="width: 100%;border:none" router>
            <el-menu-item index="/">首页</el-menu-item>
            <el-menu-item index="/aisearchIndex">AI搜索</el-menu-item>
            <el-menu-item index="/kdbList">知识库</el-menu-item>
            <el-menu-item index="/roleAgentList">角色智能体</el-menu-item>
            <el-menu-item index="/soundList">音色库</el-menu-item>
            <el-menu-item index="/deviceList">设备库</el-menu-item>
          </el-menu>
        </div>
      </div>
    </div>
  </el-header>
  <el-main style="margin-top:4px;padding:0px">
    <RouterView />
  </el-main>
  <!-- {{this.$route.path.indexOf('userCenter')}} -->
  <!-- <el-footer style="background-color: #121212;padding:40px 0px;height: fit-content;" v-if="$route.path.indexOf('userCenter') < 0 && $route.path.indexOf('createQN') < 0 && $route.path.indexOf('login') < 0 && $route.path.indexOf('register') < 0">
    <div style="font-size:12px;margin:20px 0px;color:#f4f5f6;text-align: center">
      <el-link href="https://ai.zscampus.com/psy">含光心理社区</el-link>
    </div>
    <div style="font-size:12px;margin:20px 0px;color:#f4f5f6;text-align: center">
      <el-link href="https://ai.zscampus.com"> © 含光AI提供技术支持</el-link>
    </div>
  </el-footer> -->
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}

.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
